<template>
	<view class="conten" :style="{ backgroundImage: `url(${bgImage})` }">
		<view class="conten_main"  >
			<view class="date-container">
			  <u-input shape="circle" v-model="starttime" inputAlign="center" border="none" fontSize="16px"  placeholder="请选择开始日期" class="date-input" @focus="clicktarttime"></u-input>
			  <text class="text-between">至</text>
			  <u-input shape="circle"  v-model="endtime" inputAlign="center" border="none" fontSize="16px" placeholder="请选择结束日期" class="date-input" @focus="clickendtime"></u-input>
			</view>
			<view style="text-align: left; font-size: 18px;color: #000000;font-weight: bold;margin-left: 10px;"><text>数据汇总：</text></view>
			<view style="display: flex; flex-wrap: wrap; gap: 10px;padding: 10px;justify-content: center; align-items: center;">
			    <view  class="file-item">
			        <text style="font-size: 24px;font-weight: bold;">24</text>
			        <text class="file-text">总接单</text>
			    </view>
				<view class="file-item">
				    <text style="font-size: 24px;font-weight: bold;color: #6AAF00;">24</text>
				    <text class="file-text">待配送</text>
				</view>
				<view  class="file-item">
				    <text style="font-size: 24px;font-weight: bold;">24</text>
				    <text class="file-text">已配送</text>
				</view>
			</view>
			<!-- 网点列表 -->
			<view v-for="(item, index) in indexList" :key="index">
				<view style="margin: 10px;border-radius: 12px;padding: 5px;background-color:#FEFEFE;">
					
				<u-row justify="space-between"  customStyle="padding: 10px;"  @click="spread(item.id)">
					<u-col span="5" >
						<text style="font-size: 16px;color: #000000;font-weight: bold;">{{item.name}}</text>
						
					</u-col>
					<u-col span="3" >
						<view style="display: flex; align-items: center;" >
							<span style="font-size: 12px;color:#999999 ;">网点件:</span>
							<span style="color: #000000;font-weight: bold;margin-left: 5px;">{{item.wdnum}}</span>
						</view>
						
					</u-col>
					
					<u-col span="3" >
						<view style="display: flex; align-items: center;" >
							<span style="font-size: 12px;color:#999999 ;">上门件:</span>
							<span style="color: #000000;font-weight: bold;margin-left: 5px;">{{item.smnum}}</span>
						</view>
					</u-col>
					<u-col  span="1" style="display: flex; justify-content: flex-end; align-items: center;">
						<image v-if="!item.isExpanded" src="/static/ex.png" class="right-image"  style="width: 7px;height: 12px" ></image>
						<image v-if="item.isExpanded" src="/static/sp.png" class="right-image"  style="width: 12px;height: 8px;padding-left: 20px;" ></image>
					</u-col>
				</u-row>
				<view v-if="item.isExpanded" style="background-color: white;">
				
					<view style="margin: 10px;border-radius: 12px;padding: 10px;background-color:#F8F8F8;" v-for="(item1, index1) in deaiteList" :key="index1">
						<u-row justify="space-between" customStyle="margin-bottom: 10px;" >
							<u-col span="8"  >
								<view style="display: flex; align-items: center;" >
									<text style="font-size: 14px;color: #3B3B3B;">{{item1.code}}</text>
									<image src="/static/copy.png" style="width: 12px;height: 12px;margin-left: 5px;" @click="copy(item1.code)"></image>
								</view>
							</u-col>
							<u-col span="4"  >
								<text style="font-size: 12px;color: #666666;">{{item1.time}}</text>
							</u-col>
						</u-row>
						<u-row justify="space-between" >
							<u-col span="7"  >
								<text style="font-size: 15px;color: #000000;font-weight: bold;">{{item1.address}}</text>
							</u-col>
							<u-col span="5"  >
								<view class="button-container">
									<image v-if="item1.status===1" style="width: 70px;height: 70px;position: absolute; top: -35px;left:20px" src="/static/sign.png"></image>
									<u-button v-if="item1.status===0" customStyle="width: 86px;margin-right: 10px;"  type="warning" shape="circle" size="small" text="送达" @click="arry"></u-button>
									<image class="phone-icon" src="/static/phone.png"></image>
									
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				</view>
			</view>
		</view>
		<view>
			<u-datetime-picker :show="showstart" mode="date" @confirm="confirmstart"></u-datetime-picker>
			<u-datetime-picker :show="showend" mode="date" @confirm="confirmend"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				showstart:false,
				showend:false,
				starttime:'',
				endtime:'',
				value:"",
				value15: '',
				bgImage:'/static/bg.png',
				indexList: [],
				deaiteList: [],
			}
		},
		onLoad(e) {
			this.loadmore();
		
		
		},
		onHide() {
		},
		mounted() {},
		onReady() {
					// 微信小程序需要用此写法
					//this.$refs.datetimePicker.setFormatter(this.formatter)
				},
		methods: {
			clicktarttime(){
				console.log("11111")
				this.showstart=true;
			},
			clickendtime(){
				console.log("2222")
				this.showend=true;
			},
			confirmstart(e) {
				console.log(e)
				const timeFormat = uni.$u.timeFormat;
				let vas=timeFormat(e.value, 'yyyy-mm-dd')
				console.log(vas)
				this.showstart=false;
				this.starttime=timeFormat(e.value, 'yyyy年 mm-dd')
			},
			confirmend(e) {
				console.log(e)
				const timeFormat = uni.$u.timeFormat;
				this.showend=false;
				this.endtime=timeFormat(e.value, 'yyyy年 mm-dd')
			},
			  scrolltolower() {
			        this.loadmore();
			      },
			      loadmore() {
			        for (let i = 0; i < 3; i++) {
			          this.indexList.push({
						  id:i,
			            name: "大风第七小学网点",
						wdnum:118,
						smnum:118,
						status:0,
						isExpanded:false,
			          },
					  {
						  id:100+i,
					    name: "大风第七小学网点",
					  						wdnum:118,
					  						smnum:118,
					  						status:1,
											isExpanded:false,
					  }
					  );
					  this.deaiteList.push({
						  wdid:10+i,
						  code:'3255 0000 2121 323',
						  time:'2月15号 18:00揽收',
						  address:'XXX花园小区XXXX',
						  status:0,
					  },
					  {
					  						  wdid:10+i,
					  						  code:'3255 0000 2121 323',
					  						  time:'2月15号 18:00揽收',
					  						  address:'XXX花园小区XXXX',
					  						  status:1,
					  }
					  )
			        }
			      },
				  spread(id){
						console.log("id:",id)
						 this.indexList = this.indexList.map(item => ({
						    ...item,
						    isExpanded: item.id === id ? !item.isExpanded : false
						  })); 
				  },
				  //送达
				arry(){
					uni.navigateTo({
						url: "/pages/history/songda"
					})
				},
				copy(code){
						uni.setClipboardData({
						        data: code, 
						        success: () => {
						          this.isCopied = true;
						          setTimeout(() => {
						            this.isCopied = false;
						          }, 2000);  
						        },
						        fail: (err) => {
						          console.error('复制失败:', err);
						        }
						      });
				}
				
		}
	}
</script>

<style lang="scss" scoped>
	.conten {
		width: 100%;
		height: 100vh;
		//position: relative;
		position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-size: cover;
		  z-index: 0; /* 确保背景在最底层 */
	}
	.conten_main {
		width: 100%;
		height: 100vh;
	}
.custom-style {
		color: #ff0000;
		width: 80rpx;
	}
	.button-container {
	  display: flex;
	  position: relative;
	  justify-content: space-between;  /* 两端对齐 */
	  align-items: center; /* 垂直居中对齐 */
	  width: 100%; /* 让容器铺满 */
	  gap: 10px; /* 按钮之间的间距 */
	  
	}
	.right-image {
	  position: relative;
	  width: 20px;
	  height: 20px;
	  transition: transform 0.3s ease-in-out; /* 可选，添加平滑的过渡效果 */
	}
	.date-container {
	  display: flex;
	  align-items: center;
	  justify-content: space-between; /* 两端对齐 */
	  margin: 10px;
	  background-color: #FEFEFE;
	  height: 28px; /* 调整高度 */
	  border-radius: 50px;
	  padding: 7px;
	}
	
	.date-input {
	  flex: 1; 
	  margin: 0 5px; 
	      
	}
	
	.text-between {
	  white-space: nowrap;
	}
	.file-item {
	    display: flex;
	    flex-direction: column; 
	    align-items: center; 
	    text-align: center;
	    width: 110px; 
	}
	.file-text {
	    margin-top: 5px; 
	    font-size: 14px;
	    color: #333;
	}
	.phone-icon {
	  width: 30px;
	  height: 30px;
	  margin-left: auto; /* 让 phone.png 始终靠右 */
	}
</style>